<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-descriptions v-loading="loading" class="margin-top" :size="'large'" :column="2" border>
      <el-descriptions-item class-name="cell-item" label-align="right" :span="2">
        <template #label>
          <div>是否置顶</div>
        </template>
        <el-tag v-if="dataInfo.isTop" size="large">已置顶</el-tag>
        <el-tag v-else size="large" type="info">未置顶</el-tag>
      </el-descriptions-item>
      <el-descriptions-item class-name="cell-item" label-align="right" :span="2">
        <template #label>
          <div>通知内容</div>
        </template>
        <div v-html="dataInfo.content"></div>
      </el-descriptions-item>
      <el-descriptions-item class-name="cell-item" label-align="right" min-width="100px">
        <template #label>
          <div>发布人</div>
        </template>
        {{ dataInfo.creator }}
      </el-descriptions-item>

      <el-descriptions-item class-name="cell-item" label-align="right" min-width="100px">
        <template #label>
          <div>发布日期</div>
        </template>
        {{ moment(dataInfo.createTime).format("YYYY-MM-DD") }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { useScreen } from "@/store/modules/screen";
import { SysNotify } from "@/api/notify/types";
import { getSysNotifyById } from "@/api/notify/index";
import moment from "moment";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(500);
const itemSpan = ref(2);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 1;
  } else {
    screenWidth.value = 600;
    itemSpan.value = 2;
  }
}

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      footBtn: "",
      id: 0,
    }),
  },
});

const emit = defineEmits(["sendClose"]);

const loading = ref(true);
const { dialogDetail } = toRefs(props);
const dataInfo = reactive({} as SysNotify);

onMounted(async () => {
  initScreen();
  loadData();
});

const loadData = async () => {
  loading.value = true;
  const res = await getSysNotifyById(dialogDetail.value.id);
  if (res.type === 0) {
    if (res.success) {
      dataInfo.content = res.data.content;
      dataInfo.creator = res.data.creator;
      dataInfo.createTime = res.data.createTime;
      dataInfo.isTop = res.data.isTop;
    } else {
    }
  } else {
  }
  loading.value = false;
};

/* 发送当前弹窗关闭 */
function sendClose() {
  emit("sendClose", "detail", false);
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  dialogDetail.value.visible = false;
  sendClose();
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 50px;
}
.cell-item {
  font-size: 15px;
}

:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 200px;
}

:deep(.el-input__wrapper) {
  width: 200px;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
.cell-item {
  font-size: 15px;
  color: #938d8d;
}
</style>
